<template>
	<view class="badge" v-if="props.unreadMessagesNumber">
		<text>{{ props.unreadMessagesNumber > 99 ? '99+' : props.unreadMessagesNumber }}</text>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';

const props = defineProps({
	unreadMessagesNumber: {
		type: Number,
		default: 0,
		required: true
	}
});

onLoad(() => {});
</script>

<style lang="scss">
.badge {
	position: absolute;
	min-width: 32rpx;
	min-height: 32rpx;
	padding: 0 3rpx;
	box-sizing: border-box;
	background-color: #ff4c5a;
	border-radius: 16rpx;
	right: -10rpx;
	top: -10rpx;
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
	text {
		font-weight: 500;
		font-size: 18rpx;
		color: #ffffff;
		/* #ifdef H5 */
		margin-top: -3rpx;
		transform: scale(0.9);
		/* #endif */
	}
}
</style>
